import { useContext, useEffect, useState } from 'react';
import { InBizUploadCtx } from '../../context';

interface IProps {
  id: string | number;
  filename?: string;
  className?: string;
  hasClick?: boolean;
  fileClick?: () => void;
  viewMode?:string;
}

const FileName = (props: IProps) => {
  const { id, filename, className, hasClick, fileClick ,viewMode} = props;
  const [fileName, setFileName] = useState(filename);
  const { thumbnail, uploader } = useContext(InBizUploadCtx);
  const interceptSetName = () => {
    const oldSetName = uploader.methods.setName;
    uploader.methods.setName = (fileId: string | number, newName: string) => {
      oldSetName.call(uploader.methods, fileId, newName);
      if (fileId === id) {
        setFileName(newName);
      }
    };
  };
  const getTailorFileName = (name: string) => {
    return {
      filename: name?.substring(0, name.lastIndexOf('.')),
      fileSuffix: `.${name?.substring(name.lastIndexOf('.') + 1)}`,
    };
  };

  useEffect(() => {
    interceptSetName();
  }, [filename]);

  return fileName ? (
    <div
      style={{cursor:hasClick?'pointer':'default',display:viewMode=='look'?'inline-flex':'flex'}}
      className={`react-fine-uploader-filename ${className || ''}`}
      onClick={() => fileClick && fileClick()}
      title={filename}
    >
      <span className={thumbnail ? '' : 'react-fine-uploader-gallery-filename-title'}>
        {filename}
      </span>
    </div>
  ) : null;
};

export default FileName;
